<template>
  <div id="app">
    <div class="container">
      <div class="left">
        <h2>认识亚硝酸盐</h2>
        <p>亚硝酸盐是氨在转化为硝酸盐中的中间产物，其形成过程主要为池塘中残存的饵料、粪便及死亡的藻类等有机物质分解成为有毒的氨氮，然后再转化为亚硝酸盐，或是因为在不恰当的时候使用了消毒剂，杀死了硝化细菌等微生物，从而造成亚硝酸盐的富集。</p>
      </div>
      <div class="middle">
        <h2>典型案例</h2>
        <div class="carousel">
          <el-carousel indicator-position="outside" height="800px">
            <el-carousel-item v-for="item in list" :key="item.id">
              <div class="imgBox">
                <img :src="item.img" alt="">
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="right">
        <h2>解决措施</h2>
        <p>适时清淤，可有效防止池底的淤泥过厚，过多微生物参与耗氧活动；科学合理地投加饵料，可减少饵料浪费以及过多的饵料促进微生物的分解；适时的引入新水；培养硝化细菌，促进其生长以防止亚硝酸盐的过盛；增加曝气设备，增加水体中的DO，也是防止亚硝酸盐过盛的有效措施。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Nitrite',
  data() {
    return {
      list: [
        {
          id: 1,
          img: require('@/assets/wq/nitrite1.jpg'),
        },
        {
          id: 2,
          img: require('@/assets/wq/nitrite2.jpg'),
          // img: require('')
        },
        {
          id: 3,
          img: require('@/assets/wq/nitrite3.jpg'),
        }
      ]
    }
  }
}
</script>

<style scoped>
p{
  letter-spacing: 5px;
  line-height: 2;
}
/* 布局样式 */
.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
}
.left,
.right {
  flex-basis: 20%;
}
.middle {
  flex-grow: 1;
  margin: 0 20px;
}
/* 图片轮播样式 */
.carousel {
  overflow: hidden;
  position: relative;
}
.carousel img {
  width: 100%;
  height: auto;
  display: block;
}
.carousel .slide {
  animation: slide 5s infinite;
}
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>